<umb-drawer-view ng-controller="Umbraco.Drawers.Help as vm">

    <umb-drawer-header
        title="{{ vm.title }}"
        description="{{ vm.subtitle }}">
    </umb-drawer-header>

    <umb-drawer-content>

        <!-- Tours -->
        <div class="umb-help-section" ng-if="vm.tours" data-element="help-tours">

            <h5 class="umb-help-section__title">Tours</h5>
            
            <div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'">

                <div class="umb-help-list">

                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" ng-click="tourGroup.open = !tourGroup.open">
                        <h5 class="umb-help-list-item__group-title">
                            <i ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
                            <span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
                            <span ng-if="tourGroup.group === 'undefined'">Other</span>
                        </h5>
                        <umb-progress-circle
                            percentage="{{tourGroup.completedPercentage}}"
                            size="40">
                        </umb-progress-circle>
                    </a>

                    <div ng-if="tourGroup.open">
                        <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in tourGroup.tours">
                            <div class="umb-help-list-item__content justify-between">
                                <div class="flex items-center">
                                    <div ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs umb-help-list-item__icon">{{ $index + 1 }}</div>
                                    <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" class="umb-help-list-item__icon"></umb-checkmark>
                                    <span ng-class="{'strike': tour.completed}" class="umb-help-list-item__title">{{ tour.name }}</span>
                                </div>
                                <div>
                                    <umb-button ng-if="!tour.completed && vm.showTourButton($index, tourGroup)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>       
                                    <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" action="vm.startTour(tour)"></umb-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <!-- Show in custom help dashboard -->
        <div class="umb-help-section" data-element="help-custom-dashboard" ng-if="vm.customDashboard.length > 0">
            <div ng-repeat="tab in vm.customDashboard">
                <div ng-repeat="property in tab.properties">
                    <div>
                        <h5 ng-if="property.caption">{{property.caption}}</h5>
                        <div ng-include="property.path"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--  Help Content -->
        <div class="umb-help-section" data-element="help-articles" ng-if="vm.topics.length > 0">
            <h5 class="umb-help-section__title">Articles</h5>
            <ul class="umb-help-list">
                <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
                    <a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                        <span>
                            <span class="umb-help-list-item__title">
                                <span class="bold">{{topic.name}}</span>
                                <span class="umb-help-list-item__open-icon icon-out"></span>
                            </span>
                            <span class="umb-help-list-item__description">{{topic.description}}</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>

        <!--  Umbraco tv content -->
        <div class="umb-help-section" data-element="help-videos" ng-if="vm.hasAccessToSettings">
            <h5 class="umb-help-section__title" ng-if="vm.videos.length > 0">Videos</h5>
            <ul class="umb-help-list">
                <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
                    <a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                        <i class="umb-help-list-item__icon icon-tv-old"></i>
                        <span class="umb-help-list-item__title">{{video.title}}</span>
                        <i class="umb-help-list-item__open-icon icon-out"></i>
                    </a>
                </li>
            </ul>
        </div>

        <!--  Links -->
        <div class="umb-help-section" data-element="help-links" ng-if="vm.hasAccessToSettings">
            <a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="https://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                <i class="umb-help-badge__icon icon-tv-old"></i>
                <div class="umb-help-badge__title">Visit umbraco.tv</div>
                <small>
                    <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
                </small>
            </a>

            <a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" href="https://our.umbraco.com?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
                <i class="umb-help-badge__icon icon-favorite"></i>
                <div class="umb-help-badge__title">Visit our.umbraco.com</div>
                <small>
                    <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
                </small>
            </a>
        </div>

    </umb-drawer-content>

    <umb-drawer-footer>

        <div class="flex justify-end">
            <umb-button
                alias="close"
                type="button"
                button-style="link"
                label="Close"
                action="vm.closeDrawer()">
            </umb-button>
        </div>

    </umb-drawer-footer>

</umb-drawer-view>
